import React, { Component, PropTypes } from 'react';

import {
    Redirect
} from 'react-router'
import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch
} from 'react-router-dom'
import createHistory from 'history/createBrowserHistory'

// bundle模型用来异步加载组件
import Bundle from './bundle';

import Hello from '../components/hello'; //首页组件
import No_404 from '../components/404'; //首页组件
// 异步引入
var AboutContainer = require("bundle-loader?lazy!../components/about");
const About = () => (
    <Bundle load={AboutContainer}>
        {(About) => <About />}
    </Bundle>
)

// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory()

/**
 * (路由根目录组件，显示当前符合条件的组件)
 * 
 * @class Roots
 * @extends {Component}
 */
class Roots extends Component {
    render() {
        return (
            <div>{this.props.children}</div>
        );
    }
}

const RouteConfig = (
    <Router history={history}>
        <Switch>
            <Route exact path="/" component={require('../components/hello').default} />
            <Route path="/about" component={About} />
            <Route path="/404" component={No_404} />
            <Route exact path="*" render={() => <Redirect to="/404" component={No_404} />} />
        </Switch>
    </Router>
);

export default RouteConfig;